<!--  -->
<template>
  <div>
    <v-container  fluid class="pa-0">
      <v-layout>
        <v-flex>
          <img src="@/assets/images/bg-detail.jpg" width="100%" >
        </v-flex>
      </v-layout>
    </v-container>
    <v-container class="pt-0">
      <v-layout row wrap>
        <v-flex xs12>
          <v-card flat>
            <v-card-text class="pa-0">
              <h3 class="text-xs-center">{{detailData.title}}</h3>
            </v-card-text>
          </v-card>
        </v-flex>
        <v-flex xs12>
          <v-card flat >
            <v-card-text class="pa-0">
              <p class="text-xs-center">
                <span class="pr-2" v-if="detailData.updatetime">时间：{{detailData.updatetime.slice(0,10)}}</span>
                <span class="pr-2" v-if="detailData.source">来源：{{detailData.source}}</span>
                <span class="pr-2" v-if="detailData.hits">{{detailData.hits}}浏览</span>
              </p>
            </v-card-text>
          </v-card>
        </v-flex>
        <v-flex xs12>
          <v-card flat>
            <v-card-text class="pa-0" style="word-wrap:break-word" v-html="content">
            </v-card-text>
          </v-card>
        </v-flex>
        <v-flex>
        </v-flex>
        <v-flex>
          <v-card flat >
            <v-card-text class="pa-0 text-xs-right">
              <share :config="socialConfig"></share>
            </v-card-text>
          </v-card>
        </v-flex>
      </v-layout>

    </v-container>
    <!-- <v-btn bottom right fab fixed><v-icon>keyboard_arrow_up</v-icon></v-btn> -->
  </div>
</template>

<script>
import { fetchOne } from '@/api/homepage'
import Share from 'vue-social-share'
import 'vue-social-share/dist/client.css'
export default {
  name: 'DetailPage',
  components: {
    Share
  },
  props: {
    id: {
      type: String,
      required: true
    },
    data: {
      type: Object,
      default: null
    }
  },
  data () {
    return {
      detailData: {},
      socialConfig: {
        sites: ['weibo', 'wechat', 'qzone', 'qq', 'douban']
      }
    }
  },
  created: function () {
    // if () {}
    this.getData()
  },
  computed: {
    content: function () {
      if (this.detailData.hasOwnProperty('content') && this.detailData.content !== null) {
        const reg = new RegExp('<img src="', 'g')
        return this.detailData.content.replace(reg, '<img src="https://www.sx-cc.com')
        // return this.detailData.content
      }
    }
  },
  methods: {
    getData () {
      fetchOne(this.id).then(res => {
        this.detailData = res.data
      })
    }
  }
}
</script>
<style >
.v-card{background-color: #fafafa !important;}
</style>
